<template>
  <view>
    <view style="position: fixed;top:0;z-index: 999;left: 0;width: 100%;">
      <kt-nav-bar
          :title="'Certificate Management'"></kt-nav-bar>
    </view>
    <view>
      <kt-nav-bar
          :title="'Certificate Management'"></kt-nav-bar>
    </view>

    <view
        v-if="list.length === 0"
        class="center">
      <view>
        <image
            :src="$kt.file.byPath('image/noHave.svg')"
            class="no-data-img"></image>
      </view>
    </view>

    <view>
      <u-swipe-action-item
          v-for="(item,index) in list"
          @click="showDeleteModal(item)"
          :options="options1">

        <view
            @click="$kt.router.navTo('/pages/certificateMg/certificateSave?opt=update&id='+item.id+'&enterpriseId='+enterpriseSelected.id)"
            class="in-box">
          <u-row>
            <u-col :span="12">
              <view class="title">{{item.name}}</view>
              <view class="create-time">
                {{ "Create Time" }}: {{ $kt.date.format(item.gmtCreate, 'yyyy-MM-dd hh:mm:ss') }}
              </view>
            </u-col>
          </u-row>
        </view>
      </u-swipe-action-item>
    </view>

    <view style="height: 300rpx"></view>

    <view class="bottom">
      <view
          @click="$kt.router.navTo('/pages/certificateMg/certificateSave?opt=add&enterpriseId='+enterpriseSelected.id)"
          class="bottom-btn">
        {{ "Add Certificate" }}
      </view>
      <view style="height: 20rpx"></view>
      <view style="text-align: center">
        <!-- 没有企业 -->
        <text
            style="color: #999999"
            v-if="enterpriseList.length === 0">{{ "No Enterprise" }}</text>
        <!-- 有企业 -->
        <text
            @click="$refs.enterprisePopup.open()"
            class="btn" v-else>{{enterpriseSelected.name}}</text>
      </view>
    </view>


    <u-popup
        @close="deleteModalClose"
        :show="deleteModalShow"
        :bg-color="'rgba(0,0,0,0)'">
      <view class="popup-box">
        <view class="popup-box-title">{{ "Are you sure to delete?" }}</view>
        <view style="height: 20rpx"></view>
        <view>
          <kt-button
              ref="deleteBtn"
              @click="deleteBySelf"
              :is-open-box-shadow="false">
            {{ "Confirm" }}
          </kt-button>
        </view>
        <view style="height: 20rpx"></view>

      </view>

    </u-popup>


    <enterprise-popup
        ref="enterprisePopup"
        @select="selectEnterprise"
    ></enterprise-popup>

  </view>
</template>

<script>
export default {
  data() {
    return {
      deleteModalShow:false,
      item:{},
      list:[],
      enterpriseList:[],
      enterpriseSelected:{},
      options1: [
        {
          text: 'Delete',
          style: {
            backgroundColor: '#ff0000'
          }
        }
      ],
    };
  },
  onLoad(option) {
  },
  created() {
    this.getEnterpriseListSelf();
    this.$kt.event.on("certificateSave", ()=>{
      this.getSelf();
    });
  },
  methods:{
    getEnterpriseListSelf(){
      // /business-erp-web/erpEnterprise/getSelf
      this.$kt.request.send({
        uri: '/business-erp-web/erpEnterprise/getBySelf',
        stateSuccess: (res) => {
          this.enterpriseList = res.data;
          if(this.enterpriseList.length > 0){
            this.selectEnterprise(this.enterpriseList[0]);
          }
        },
        stateFail: (res) => {
        }
      });
    },
    getSelf(){
      this.$kt.request.send({
        uri: '/business-erp-web/erpCertificate/getBySelf',
        data: {
          enterpriseId: this.enterpriseSelected.id
        },
        stateSuccess: (res) => {
          this.list = res.data;
        },
        stateFail: (res) => {
        }
      });
    },
    // 选择企业
    selectEnterprise(item){
      this.enterpriseSelected = item;
      this.getSelf();
    },
    showDeleteModal(item){
      this.deleteModalShow = true;
      this.item = item;
    },
    deleteBySelf(){
      this.$refs.deleteBtn.loading();
      this.$kt.request.send({
        uri: '/business-erp-web/erpCertificate/deleteBySelf',
        data: {
          id: this.item.id
        },
        stateSuccess: (res) => {
          this.getSelf();
          this.$refs.deleteBtn.success(res.msg);
          this.deleteModalShow = false;
        },
        stateFail: (res) => {
          this.$refs.deleteBtn.success(res.errMsg);
        }
      });
    },
    deleteModalClose(){
      setTimeout(()=>{
        this.deleteModalShow = false;
      },100);
    }
  }
}
</script>

<style lang="scss" scoped>
.in-box {
  padding: 20rpx;
  margin: 10rpx 0;
}

.time-text {
  font-size: 28rpx;
  color: #666666;
}

.clock-type-view {
}

.tag {
  display: inline-block;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  background-color: #000000;
  color: #fef0f0;
  margin-bottom: 10rpx;
  font-size: 24rpx;
}

.more-view {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  margin-top: 40rpx;
  color: #000000;
}

.more-btn:active {
  opacity: .5;
}

.no-data-img {
  width: 200rpx;
  height: 200rpx;
}

.no-data-view {
  width: 100%;
  text-align: center
}

.clock-type-img{
  width: 50rpx;
  height: 50rpx;
}

.in-box-2{
  padding-top: 0;
  border: none;
}
.title{
  font-size: 32rpx;
  margin-bottom: 10rpx;
}

.btn-que{
  display: inline-block;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  border: 1rpx solid #cccccc;
  color: #666666;
  font-size: 24rpx;
}

.btn-que:active{
  opacity: .5;
}

.bottom{
  position: fixed;
  width: 100%;
  bottom: 0;
  padding: 40rpx;
  box-sizing: border-box;
  background-color: #FFFFFF;
  z-index: 999;
}

.bottom-btn{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
  border-radius: 40rpx;
  bottom: 0;
}

.bottom-btn:active{
  opacity: .8;
}

.create-time{
  font-size: 24rpx;
  color: #666666;
}

.logo-img{
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
}
.popup-box{
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 30rpx 30rpx 0 0;
}
.popup-box-title{
  text-align: center;
  font-size: 42rpx;
}

.center{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.btn{
  color: #000000;
  font-size: 30rpx;
}
.btn:active{
  opacity: .5;
}
</style>
